<template>
  <div>
    <rj-table
      :columns="authDeviceGroupColumns"
      :data-source="authDeviceGroups"
      :pagination="pagination"
      :loading="loading"
      @change="onChangeTable"
      rowKey="id"
      :row-selection="{
        onChange: onSelectChange,
      }"
    >
      <div slot="customBlock" class="log-opt-wrapper">
        <a-space :size="16">
          <a-button type="primary" @click="onAdd">
            <icon-font type="ic-plus" />
            {{ $t('authDevice.addGroup') }}
          </a-button>
          <a-button @click="onBatchDelete">
            {{ $t('common.batchDelete') }}
          </a-button>
        </a-space>
        <a-input-search
          :placeholder="$t('authDevice.groupName')"
          v-model="queryParamObj.groupName"
          @change="getListDebounce"
          style="width: 200px"
        />
      </div>

      <!-- 认证策略 -->
      <template slot="authPolicy" slot-scope="text, record">
        <div v-if="record?.authRuleList?.length > 0" class="policy-wrapper">
          <div
            :key="ruleItem.id"
            class="policy-item"
            :class="getPolicyTypeCls(ruleItem.authModeType)"
            v-for="ruleItem in record?.authRuleList"
          >
            <div class="policy-type">
              {{ getPolicyTypeName(ruleItem.authModeType) }}
            </div>
            {{ ruleItem.name }}
          </div>
        </div>
      </template>

      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <rj-space :size="16">
          <icon-font
            type="ic-edit"
            @click="onEdit(record)"
            :title="$t('common.edit')"
          ></icon-font>
          <icon-font
            type="ic-delete"
            @click="onDelete(record)"
            :title="$t('common.delete')"
          ></icon-font>
        </rj-space>
      </template>
    </rj-table>
    <AddModal @refreshList="getAuthDeviceGroupList" ref="addGroupModalRef" />
  </div>
</template>

<script>
import { maccApi, requestHttp } from '@utils/index';
import { mapState } from 'vuex';
import { RjTable } from '@components';
import AddModal from './addModal.vue';
import { authDeviceGroupColumns } from './columns.js';
import lodash from 'lodash';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
export default {
  name: 'authDeviceGroupList',
  mixins: [authSysMixin],
  data() {
    return {
      loading: false,
      authDeviceGroupColumns,
      authDeviceGroups: [],
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10, //每页条数
        showSizeChanger: true,
        showQuickJumper: true,
      },
      queryParamObj: {
        groupName: '',
      },
      selectedRowKeys: [],
    };
  },
  mounted() {
    this.getAuthDeviceGroupList();
  },
  components: {
    'rj-table': RjTable,
    AddModal,
  },
  computed: {
    authDeviceGroupMap() {
      const tempMap = {};
      this.authDeviceGroups.forEach((group) => {
        tempMap[group.id] = group;
      });
      return tempMap;
    },
  },
  methods: {
    // 表格复选框勾选事件
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    onEdit(record) {
      this.$refs.addGroupModalRef.openModal(record);
    },
    onAdd() {
      this.$refs.addGroupModalRef.openModal();
    },
    getPolicyTypeCls(authModeType) {
      switch (authModeType) {
        case 2:
        case 3:
          return 'dot1x';
        case 4:
          return 'mab';
        case 1:
        default:
          return 'portal';
      }
    },

    getPolicyTypeName(authModeType) {
      switch (authModeType) {
        case 2:
        case 3:
          return '802.1X';
        case 4:
          return this.$t('authLog.mab');
        case 1:
        default:
          return 'Portal';
      }
    },

    onBatchDelete() {
      if (!this.selectedRowKeys.length) {
        this.$message.warning(this.$t('common.oneData'));
        return false;
      }

      for (const key of this.selectedRowKeys) {
        const record = this.authDeviceGroupMap[key];
        if (record.deviceNum && record.deviceNum > 0) {
          this.$message.warning(this.$t('authDevice.notDelTip'));
          return false;
        }
      }

      const self = this;
      this.$confirm({
        title: this.$t('common.batchDelete'),
        content: this.$t('authDevice.deleteGroupConfirm'),
        onOk() {
          self.deleteDeviceGroup(self.selectedRowKeys.join(','));
        },
      });
    },

    onDelete(record) {
      const self = this;

      if (record.deviceNum && record.deviceNum > 0) {
        this.$message.warning(this.$t('authDevice.notDelTip'));
        return false;
      }

      this.$confirm({
        title: this.$t('common.delete'),
        content: this.$t('authDevice.deleteGroupConfirm2'),
        onOk() {
          self.deleteDeviceGroup(record.id);
        },
      });
    },

    async deleteDeviceGroup(devGroupIdStr) {
      const res = await this.requestHttpAuth({
        api: maccApi.PRIVATE_DEVICE_GROUP_BATCH_DEL_API,
        method: 'DELETE',
        querys: {
          ids: devGroupIdStr,
        },
      });

      if (res.data.success) {
        this.getAuthDeviceGroupList();

        // dev中的用户组要强制刷新下
        this.$EventBus.$emit('authDevice/refreshGroupList');
      } else {
        this.$message.warning(res.data.message);
      }
    },

    getListDebounce: lodash.debounce(function () {
      this.getAuthDeviceGroupList();
    }, 1500),

    async getAuthDeviceGroupList() {
      const res = await this.requestHttpAuth({
        api: maccApi.PRIVATE_DEVICE_GROUP_GET_API,
        method: 'GET',
        querys: {
          groupId: this.groupId,
          page: this.pagination.current,
          size: this.pagination.pageSize,
          name: this.queryParamObj.groupName,
        },
      });

      if (res.data.success) {
        this.pagination.total = res.data.result.total;
        this.authDeviceGroups = res.data.result.items;
      } else {
        this.$message.warning(res.data.message);
      }
    },

    //table表格分页变化时触发
    onChangeTable(pagination, filterObj, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getAuthDeviceGroupList();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.defultWapper {
  margin-left: 0;
}

.log-tip {
  font-size: 12px;
  color: #00000073;
}
.log-opt-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.add-btn {
  height: 32px;
  display: flex;
  align-items: center;
  i {
    font-size: 18px;
    height: 18px;
  }
}
.policy-wrapper {
  font-size: 12px;
  display: flex;
  max-width: 600px;
  flex-wrap: wrap;
  gap: 8px;
}
.policy-item {
  padding: 6px;
  display: flex;
  gap: 4px;
  border-radius: 2px;
  cursor: pointer;
}
.policy-type {
  border-radius: 2px;
  padding: 0 4px;
  color: #fff;
}
.dot1x {
  border: 1px solid @theme-focus;
  color: @theme-color;
  .policy-type {
    background: @theme-color;
  }
  &:hover {
    background: @theme-light;
  }
}
.mab {
  border: 1px solid @success-focus;
  color: @success-color;
  .policy-type {
    background: @success-color;
  }
  &:hover {
    background: @success-light;
  }
}
.portal {
  border: 1px solid @gold-3;
  color: @gold-6;
  .policy-type {
    background: @gold-6;
  }
  &:hover {
    background: @gold-1;
  }
}
</style>
